<template>
    <div id="background">
        <el-container>
         

                <el-header style="position:fixed;top:0;width:100%;z-index:2">
                    <div id="zhaoPinHeadPosition" class="imgCol">
                        <el-row type="flex" style="height:90%;display:flex;align-items: flex-end;justify-content:center;width:80%">
                            <!-- <el-autocomplete
                                class="zhaoPinInput"
                                v-model="state"
                                placeholder="请输入公司或职位"
                                prefix-icon="el-icon-search"
                            >
                                <span slot="prepend">杭州 <i class="el-icon-caret-bottom" @click="goToPosition"></i></span>
                            
                            </el-autocomplete> -->
                              <el-input placeholder="请输入内容" v-model="searchInfo"  class="zhaoPinInput">
                                <span slot="prepend">杭州 <i class="el-icon-caret-bottom" @click="goToPosition"></i></span>
                                <el-button slot="append" icon="el-icon-search" @click="searchKeyWords"></el-button>
                            </el-input>
                        </el-row>
                    </div>
                    <div>
                        <el-row class="zhaoPinTabRow" type="flex">
                            <el-col style="width:1/3" class="imgCol">
                                <span v-show="!zuiXin" style="font-size:15px;" @click="changeZuiXin">
                                    最新发布
                                </span>
                                <span v-show="zuiXin" style="font-size:15px;color:#53cdf5">
                                    最新发布
                                </span>
                            </el-col>
                            <el-col style="width:1/3" class="imgCol">
                                <span v-show="!zuiGao" style="font-size:15px;"  @click="changeZuiGao">
                                    工资最高
                                </span>
                                <span v-show="zuiGao" style="font-size:15px;color:#53cdf5">
                                    工资最高
                                </span>
                            </el-col>
                            <el-col style="width:1/3" class="imgCol">
                                <span>
                                    <img :src="shaiXuan" class="shaiXuan" @click="shaiXuanShow = true">
                                </span>
                                <span style="font-size:15px;margin-left:5px;" @click="shaiXuanShow = true">
                                    条件
                                </span>
                                <van-popup v-model="shaiXuanShow" position="right" :style="{ width: '73%',height:'100%' }">
                                   <div style="margin-top:20px">
                                       <div style="margin-left:10px;margin-bottom:10px">
                                           <span class="words">工种选择</span>
                                       </div>
                                       <span  v-for="(gongZhong,index) in gongZhongs" v-bind:key="gongZhong.professionId" >
                                             <button v-show="!mapGongZhong[index]" class="btnZhaoPinShaiXuan" @click="chooseGongZhong(index)">{{gongZhong.professionName}}</button>
                                             <button v-show="mapGongZhong[index]" class="btnShaiXuanChoose" @click="chooseGongZhong(index)">{{gongZhong.professionName}}</button>
                                       </span>
                                   </div>
                                   <div style="margin-top:20px">
                                       <div style="margin-left:10px;margin-bottom:10px">
                                           <span class="words">学历条件</span>
                                       </div>
                                       <span v-for="(xueLi,index) in xueLis" v-bind:key="index" >
                                             <button v-show="!arrXueLi[index]" class="btnZhaoPinShaiXuan" @click="chooseXueLi(index)">{{xueLi}}</button>
                                             <button v-show="arrXueLi[index]" class="btnShaiXuanChoose" @click="chooseXueLi(index)">{{xueLi}}</button>
                                       </span>
                                   </div>
                                   <div style="margin-top:20px">
                                       <div style="margin-left:10px;margin-bottom:10px">
                                           <span class="words">经验条件</span>
                                       </div>
                                       <span  v-for="(jinYan,index) in jinYans" v-bind:key="jinYan.id">
                                             <button v-show="!arrJinYan[index]" class="btnZhaoPinShaiXuan" @click="chooseJinYan(index)">{{jinYan.name}}</button>
                                             <button v-show="arrJinYan[index]" class="btnShaiXuanChoose" @click="chooseJinYan(index)">{{jinYan.name}}</button>
                                       </span>
                                   </div>
                                    <div style="margin-top:20px">
                                       <div style="margin-left:10px;margin-bottom:10px">
                                           <span class="words">性别条件</span>
                                       </div>
                                       <span  v-for="(sex,index) in sexs" v-bind:key="sex.id">
                                             <button v-show="!arrSex[index]" class="btnZhaoPinShaiXuan" @click="chooseSex(index)">{{sex.name}}</button>
                                             <button v-show="arrSex[index]" class="btnShaiXuanChoose" @click="chooseSex(index)">{{sex.name}}</button>
                                       </span>
                                   </div>
                                   <div style="position:fixed;bottom:70px;width:100%">
                                                <el-row >          
                                                    <el-col :xs="12" :sm="12" :md="12" class="end">
                                                        <button class="btnShaiXuanReset" @click="shaiXuanReset">重置</button>
                                                    </el-col>
                                                    <el-col :xs="12" :sm="12" :md="12">
                                                        <button class="btnShaiXuanSure" @click="shaiXuanSure">确定</button>
                                                    </el-col>
                                                </el-row>
                                   </div>
                                </van-popup>
                            </el-col>
                        </el-row>
                    </div>
                </el-header>
                <el-main id="zhaoPinMainPosition" style="backgroundColor:#ffffff;margin-top:130px">
                    <!-- <sticky-slot> -->
        
                    <!-- </sticky-slot> -->
                    <div style="height:5px;backgroundColor:#f5f4f9"></div>
                    <!-- <div class="infinite-list-wrapper" style="overflow:auto"> -->
                    <div  v-infinite-scroll="load" infinite-scroll-disabled="disabled" v-for="zhaoPin in zhaoPins" v-bind:key="zhaoPin.id" @click="goToZhaoPinDetail(zhaoPin.id,zhaoPin.companyId)">
                        <div style="padding:10px 10px 6px 10px;backgroundColor:#ffffff"  >
                            <el-container>
                                <el-aside width="90px">
                                    <el-image
                                        style="width: 80px; height: 80px"
                                        :src="zhaoPin.picture"
                                        fit="cover"
                                    />
                                </el-aside>
                                <el-main>
                                    <div >
                                        <span class="words noHuanHang">{{zhaoPin.companyName}}</span>
                                    </div>
                                    <div class="zhaoPinTags" style="margin-top:8px;">
                                        <van-tag v-show="zhaoPin.socialSecurityNotice" color="#53cdf5" plain>{{zhaoPin.socialSecurityNotice}}</van-tag>
                                        <van-tag v-show="zhaoPin.ageRequest" color="#f2826a" plain>{{zhaoPin.ageRequest}}</van-tag>
                                        <!-- <van-tag color="#7232dd" plain>女性</van-tag> -->
                                    </div>
                                    <el-row style="margin-top:8px;">
                                        <el-col :xs="14" :sm="14" :md="14" >
                                             <span class=" noHuanHang" style="color:#f16161">{{zhaoPin.salary}}</span>
                                        </el-col>
                                        <el-col :xs="10" :sm="10" :md="10" class="end">
                                             <span class="words noHuanHang" >{{zhaoPin.city}}</span>
                                        </el-col>
                                    </el-row>
                                </el-main>
                            </el-container>
                        </div>
                          <div style="height:5px;backgroundColor:#f5f4f9"></div>
                    </div>
                    <!-- </div> -->
                    <div style="height:5px;backgroundColor:#fff"></div>
                    <div v-if="loading" class="imgCol">
                        <span class="words" style="font-size:14px">加载中...</span>
                    </div>
                    <div v-if="noMore" class="imgCol">
                        <span class="words" style="font-size:14px">没有更多了...</span>
                    </div>
                    <div style="height:60px"></div>
                </el-main>
        
            <el-footer  :class="whichPosition?'foot':'foot2'">
                <div>
                    <el-row type="flex" justify="space-around" style="margin-top:10px">
                        <el-col :xs="6" :sm="6" :md="6" >
                        <div class="imgCol" >
                            <img v-bind:src="peiXunIcon"  class="mainIconSize" @click="goToPeiXun"/>
                        </div>
                        <div class="imgCol" @click="goToPeiXun">
                            <span class="words littleWords"  >培训</span>
                        </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="zhaoPinIcon"  class="mainIconSize"/>
                        </div>
                        <div class="imgCol">
                            <span class="words littleWords" style="color:#53cdf5">招聘</span>
                        </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="xiaoXiIcon"  class="mainIconSize" @click="goToXiaoXi"/>
                            <!--<i class="el-icon-chat-dot-square" style="font-size:24px;color:#707070" ></i>-->
                        </div>
                        <div class="imgCol" @click="goToXiaoXi">
                            <span class="words littleWords" >消息</span>
                        </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="woDeIcon"  style="color:#53cdf5" class="mainIconSize"  @click="goToMine()"/>
                        </div>
                        <div class="imgCol"  @click="goToMine()">
                            <span class="words littleWords"  >我的</span>
                        </div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import peiXunIcon from '../../assets/img/mine/peixun.png'
import zhaoPinIcon from '../../assets/img/zhaoPin/zhaoPinChoose.png'
import xiaoXiIcon from '../../assets/img/mine/news.png'
import woDeIcon from '../../assets/img/mine/mine.png'
import shaiXuan from '../../assets/img/zhaoPin/shaiXuan.png'
import stickySlot from '../common/stickySlot/stickySlot.vue'
import { Toast } from 'vant'
import { setTimeout, setInterval } from 'timers';
export default {
    components:{ 
        stickySlot,
    },
    data(){
        return{
            //绑定加载状态是否显示
            loading: false,
            //绑定搜索框的输入内容
            searchInfo:'',
            windowHeight:'',
            //绑定页码信息
            pageInfo:{
                pageNum:1,
                pageSize:6,
                total:0
            },
            //绑定tab条内容
            zuiXin:true,
            zuiGao:false,
            //绑定筛选右侧弹出层
            shaiXuanShow:false,
            //绑定工种信息
            gongZhongs:[],
            //绑定工种的选择与否
            mapGongZhong:[],
            //绑定学历信息
            xueLis:[{id:1,name:'本科'},{id:2,name:'高中'},{id:3,name:'初中'},{id:4,name:'大专'},{id:5,name:'小学'},{id:6,name:'幼稚园'}],
            //绑定学历的选择与否
            arrXueLi:[],
            //绑定经验信息
            jinYans:[{id:1,name:'不限'},{id:2,name:'一年以下'},{id:3,name:'1~3年'},{id:4,name:'3年以上'}],
            //绑定经验的选择与否
            arrJinYan:[1,0,0,0],
            //绑定性别信息
            sexs:[{id:null,name:'不限'},{id:true,name:'男'},{id:false,name:'女'}],
            //绑定性别的选择与否
            arrSex:[1,0,0],
            // //绑定下拉菜单内容
            // valGongZhong:'',
            // valZhiWei:'',
            //绑定显示内容
            zhaoPins:[],
            select:'',
            state:'',
            backIcon:backIcon,
            peiXunIcon:peiXunIcon,
            zhaoPinIcon:zhaoPinIcon,
            xiaoXiIcon:xiaoXiIcon,
            woDeIcon:woDeIcon,
            shaiXuan:shaiXuan,
            //实时屏幕高度
            showHeight:document.documentElement.clientHeight,
            height:document.documentElement.clientHeight,
            whichPosition:true,
        }
    },
    computed: {
      noMore () {
        return this.zhaoPins.length>=this.pageInfo.total;
      },
      disabled () {
        return this.loading || this.noMore;
      }
    },
     watch:{
        showHeight(val){
            console.log("shoHeight"+this.showHeight);
            this.whichFoot();
        },
  },
    mounted(){
         
       this.getZhiYes();
       this.getXueLis();
        var params='';
        params={
            pageNo:1,
            pageSize:this.pageInfo.pageSize,
            orderType:'NEW',
            // city:'杭州市'
        }
        var data={
            	province: null,
                city: null,
                area: null,
                professionId: null,
                positionId: null,
                sexRequest:null,
                minAgeRequest: null,
                maxAgeRequest: null,
                eduBackGround: null,
                minExpRequest: null,
                maxExpRequest: null,
        }
        this.getZhaoPinInfo(params,data);

        var normalHeight=sessionStorage.getItem('normalHeight');
        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("zhaoPinHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
        

        // var main=document.getElementById("zhaoPinScrollArea");
        // var mainHeight=normalHeight-60;
        // console.log("mainHeight:"+mainHeight);
        // main.style.height=mainHeight+'px';
           // window.onresize监听页面高度的变化
        const that = this;
        window.onresize = () => {
            return (() => {
                window.screenHeight=document.documentElement.clientHeight;
               that.showHeight=window.screenHeight;
            })()
         }
    

    },
    methods:{
        load () {
            this.loading = true
            setTimeout(() => {
            this.pageInfo.pageNum++;
            var params={
                pageNo:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize,
                orderType:'NEW',
            };
            var data={
                    province: null,
                    city: null,
                    area: null,
                    professionId: null,
                    positionId: null,
                    sexRequest:null,
                    minAgeRequest: null,
                    maxAgeRequest: null,
                    eduBackGround: null,
                    minExpRequest: null,
                    maxExpRequest: null,
            }
            this.getZhaoPinInfo(params,data);
            this.loading = false;

            }, 2000)
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goToMine(){
            this.$router.push({
                path:'/mine'
            })
        },
        goToPeiXun(){
            this.$router.push({
                path:'/peiXun'
            })
        },
        goToXiaoXi(){
          this.$router.push({
            path:'/xiaoXi'
          })
        },
        goToPosition(){
            this.$router.push({
                path:'/zhaoPin/position'
            })
        },
        goToZhaoPinDetail(id,companyId){
            this.$router.push({
                path:'/zhaoPin/detail',
                query:{
                    id:id,
                    companyId:companyId
                }
            })
        },
        changeZuiXin(){
           this.zuiXin=true;
           this.zuiGao=false;
           this.zhaoPins=[];
           this.more=false;
           this.pageInfo.pageNum=1;
           var params={
               pageNo:this.pageInfo.pageNum,
               pageSize:this.pageInfo.pageSize,
               orderType:'NEW',
            //    city:'杭州市'
           }
             var data={
                province: null,
                city: null,
                area: null,
                professionId: null,
                positionId: null,
                sexRequest:null,
                minAgeRequest: null,
                maxAgeRequest: null,
                eduBackGround: null,
                minExpRequest: null,
                maxExpRequest: null,
            }
           this.getZhaoPinInfo(params,data);
        },
        changeZuiGao(){
            this.zuiXin=false;
            this.zuiGao=true;
            this.zhaoPins=[];
            this.more=false;
            this.pageInfo.pageNum=1;
            var params={
                pageNo:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize,
                orderType:'SALARY',
                // city:'杭州市'
            }
            var data={
               	province: null,
                city: null,
                area: null,
                professionId: null,
                positionId: null,
                sexRequest:null,
                minAgeRequest: null,
                maxAgeRequest: null,
                eduBackGround: null,
                minExpRequest: null,
                maxExpRequest: null,
            }
            this.getZhaoPinInfo(params,data);
        },
        //获取工种种类
        getZhiYes(){
            var URL=this.IP.IP+'/visitor/getProfessionInformation';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.gongZhongs=response.data.data.professionInformation;
                    var i=0;
                    for(i=0;i<this.gongZhongs.length;i++){
                        this.mapGongZhong[i]=false;
                    }
                    // this.gongZhongs[0]['choose']=true;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
      },
      //获取学历条件
      getXueLis(){
            var URL=this.IP.IP+'/post/eduEnum';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.xueLis=response.data.data;
                    var i=0;
                    for(i=0;i<this.xueLis.length;i++){
                        this.arrXueLi[i]=0;
                    }
                    // console.log(this.mapXueLi);
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
      },
      //条件搜索得到招聘信息
      getZhaoPinInfo(params,data){
            var URL=this.IP.IP+'/post/postsSatisfyTheConditionsOf';
            console.log(URL);
            console.log(params);
            console.log(data);
            this.$ajax({
                method:'post',
                url:URL,
                data:data,
                params:params,
               
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    //    this.zhaoPins=response.data.data.info;
                    var i=0;
                    for(i=0;i<response.data.data.info.length;i++){
                        this.zhaoPins.push(response.data.data.info[i])
                    }
                   this.pageInfo.total=response.data.data.total;
                
                }else{
                    // Toast(response.data.msg);
                    // this.more=true;
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
      },
      //条件筛选变化工种,map实现双向绑定
      chooseGongZhong(index){
          console.log(index);
        var i=0;
        for(i=0;i<this.mapGongZhong.length;i++){
            this.$set(this.mapGongZhong,i,0);
        }
        if(index!=-1){
            this.$set(this.mapGongZhong,index,1);
        }
      },
      //变化学历
      chooseXueLi(index){
          console.log(index);
          var i=0;
          for(i=0;i<this.arrXueLi.length;i++){
              this.$set(this.arrXueLi,i,0);
          }
          if(index!=-1){
            this.$set(this.arrXueLi,index,1);
          }
          console.log(this.arrXueLi);
      },
      //变化经验
      chooseJinYan(index){
          var i=0;
          for(i=0;i<this.arrJinYan.length;i++){
              this.$set(this.arrJinYan,i,0);
          }
          if(index!=-1){
            this.$set(this.arrJinYan,index,1);
          }else{
              this.$set(this.arrJinYan,0,1);
          }

          console.log(this.arrJinYan);
      },
      //变化性别
      chooseSex(index){
          var i=0;
          for(i=0;i<this.arrSex.length;i++){
              this.$set(this.arrSex,i,0);
          }
          if(index!=-1){
            this.$set(this.arrSex,index,1);
          }else{
              this.$set(this.arrSex,0,1);
          }

      },
      //重置条件筛选
      shaiXuanReset(){
        this.chooseGongZhong(-1);
        this.chooseXueLi(-1);
        this.chooseJinYan(-1);
        this.chooseSex(-1);
      },
      //提交筛选结果(这里未处理经验筛选，优化过后再改进)
      shaiXuanSure(){
          if(this.zuiXin==true){
              var type='NEW';
          }else{
              var type='SALARY'
          }
          //处理学历
          var index1=0,xueLi='';
          index1=this.arrXueLi.indexOf(1);
          console.log(index1);
          if(index1<0){
              xueLi=null;
          }else{
              xueLi=this.xueLis[index1];
          }
          var index2=0,sex='';
          index2=this.arrSex.indexOf(1);
          console.log(index2)
          if(index2<0){
              sex=null;
          }else{
              sex=this.sexs[index2].id;
          }
          var index3=0,gongZhong='';
          index3=this.mapGongZhong.indexOf(1);
          console.log(index3);
          if(index3<0){
              gongZhong=null;
          }else{
              gongZhong=this.gongZhongs[index3].professionId;
          }
          this.pageInfo.pageNum=1;
          var params={
              pageSize:this.pageInfo.pageSize,
              pageNo:this.pageInfo.pageNum,
              orderType:type,
          }
          var data={
              city:null,
              eduBackGround:xueLi,
              sexRequest:sex,
              professionId:gongZhong,
                province: null,
                area: null,
                positionId: null,
                minAgeRequest: null,
                maxAgeRequest: null,
                minExpRequest: null,
                maxExpRequest: null,
          }
        
          
          console.log(params);
          this.zhaoPins=[];
          this.getZhaoPinInfo(params,data);
          Toast("筛选成功！");
          this.shaiXuanShow=false;
      },
        //比较实时高度，判断底部样式
        whichFoot(){
            if(this.showHeight<this.height){
                //console.log("foot not fixed");
                this.whichPosition=false;
            }else{
                //console.log("foot fixed");
                this.whichPosition=true;
            }
        },
        //关键字搜索
        searchKeyWords(){
            if(this.zuiXin==true){
                var type='NEW';
            }else{
                var type='SALARY'
            }
            // this.pageInfo.total=0;
            this.pageInfo.pageNum=1;
            var params={
                pageNo:this.pageInfo.pageNum,
                pageSize:this.pageInfo.pageSize,
                orderType:type,
                keyWord:this.searchInfo
            }
            var data={};
            this.zhaoPins=[];
            this.getZhaoPinInfo(params,data);
        }
    }
}
</script>
<style>

.btnShaiXuanChoose{
    border-style: none;
    height: 30px;
    /* width: 60px; */
    width: 25%;
    background-color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    color: #53cdf5;
    border:1px solid #53cdf5;
    margin-bottom: 10px;
    margin-left:10px;
    border-radius: 5px;
}
.btnZhaoPinShaiXuan{
    border-style: none;
    border:1px solid #E0E0E0;
    height: 30px;
    /* width: 60px; */
    width: 25%;
    background-color: #E0E0E0;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 10px;
    margin-left:10px;
    border-radius: 5px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.noHuanHang{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zhaoPinTabRow{
    background-color: #ffffff;
    padding:10px;
    color: #707070;
    height:10%;
}
.shaiXuan{
    width:18px;
    height:12px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.btnShaiXuanReset{
    background-color: #fff;
    height: 40px;

    width: 80%;
    color: #53cdf5;
    font-size: 1.125em;
    outline: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border:#53cdf5 1px solid;
}
.btnShaiXuanSure{
    background-color: #53cdf5;
    height: 40px;
    width: 80%;
    color: #ffffff;
    font-size: 1.125em;
    outline: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border:#53cdf5 1px solid;
}
.zhaoPinTags{
    white-space: nowrap;
    overflow: hidden;
}
.moneyCss{
  color: #F16161;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #53cdf5;
}
.zhaoPinInput .el-input-group--prepend {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.el-aside{
    padding: 0px;
}
.el-main {
    padding: 0px ;
}
.el-header{
  padding:0px;
}
.el-footer {
    padding:0px;
}
#zhaoPinHeadPosition{
    background-color: #53cdf5;
}
.words{
    color:#707070;
}
.littleWords{
  margin-top:5px;
    font-size: 13px;
}
.mainIconSize{
    height:23px;
}
.foot{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
  background-color: #fff;
    border-top: 1px solid #f5f4f9;
}
.foot2{
    position: static;
    background-color: #fff;
    border-top: 1px solid #f5f4f9;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
